

<!DOCTYPE html>
<html lang class="loading">
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>微信小程序连接百度地图API实现天气查询 - 闲看花开 静待花落</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate">
    <meta name="keywords" content="贰货不二,"> 
    <meta name="description" content="微信小程序连接百度地图API实现天气查询一、获取百度地图开放平台天气查询API 进入百度地图开放平台.（没有账号的需要先申请一下，获取api不需要收费）  
二、添加百度天气查询域名 然后进入微信公,"> 
    <meta name="author" content="贰货不二"> 
    <link rel="alternative" href="atom.xml" title="闲看花开 静待花落" type="application/atom+xml"> 
    <link rel="icon" href="/img/favicon.png"> 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <link rel="stylesheet" href="/css/diaspora.css">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({
              google_ad_client: "ca-pub-8691406134231910",
              enable_page_level_ads: true
         });
    </script>
    <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
    
</head>
</html>
<body class="loading">
    <span id="config-title" style="display:none">闲看花开 静待花落</span>
    <div id="loader"></div>
    <div id="single">
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="icon-home image-icon" href="javascript:;" data-url="https://mrdcg.github.io"></a>
    <div title="播放/暂停" class="icon-play"></div>
    <h3 class="subtitle">微信小程序连接百度地图API实现天气查询</h3>
    <div class="social">
        <!--<div class="like-icon">-->
            <!--<a href="javascript:;" class="likeThis active"><span class="icon-like"></span><span class="count">76</span></a>-->
        <!--</div>-->
        <div>
            <div class="share">
                <a title="获取二维码" class="icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">微信小程序连接百度地图API实现天气查询</h1>
        <div class="stuff">
            <span>七月 07, 2019</span>

            <span>
   阅读数(请刷新)<span id="busuanzi_value_page_pv"></span>
</span>
            
  <ul class="post-tags-list"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/微信小程序/">微信小程序</a></li></ul>



        </div>
        <div class="content markdown">
            <h3 id="微信小程序连接百度地图API实现天气查询"><a href="#微信小程序连接百度地图API实现天气查询" class="headerlink" title="微信小程序连接百度地图API实现天气查询"></a>微信小程序连接百度地图API实现天气查询</h3><h2 id="一、获取百度地图开放平台天气查询API"><a href="#一、获取百度地图开放平台天气查询API" class="headerlink" title="一、获取百度地图开放平台天气查询API"></a><a href></a>一、获取百度地图开放平台天气查询API</h2><p> 进入<a href="http://lbsyun.baidu.com/" target="_blank" rel="noopener">百度地图开放平台</a>.（没有账号的需要先申请一下，获取api不需要收费）<br> <img src="https://i.loli.net/2019/07/08/5d23073ca437139921.png" alt><img src="https://i.loli.net/2019/07/08/5d2307504280675666.png" alt><img src="https://i.loli.net/2019/07/08/5d23075c5793725467.png" alt><br> <img src="https://i.loli.net/2019/07/08/5d23076c2adde92091.png" alt><img src="https://i.loli.net/2019/07/08/5d23078f0d88e98089.png" alt></p>
<h2 id="二、添加百度天气查询域名"><a href="#二、添加百度天气查询域名" class="headerlink" title="二、添加百度天气查询域名"></a><a href></a>二、添加百度天气查询域名</h2><p> 然后进入<a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener">微信公众平台</a><br> <img src="https://i.loli.net/2019/07/08/5d2307b7a363e65201.png" alt><img src="https://i.loli.net/2019/07/08/5d2307c495aa192882.png" alt><img src="https://i.loli.net/2019/07/08/5d2307cf065f218941.png" alt><img src="https://i.loli.net/2019/07/08/5d2307dc9cd3c69100.png" alt><br> 在request合法域名中添加域名 <a href="http://api.map.baidu.com" target="_blank" rel="noopener">api.map.baidu.com</a><br> 添加域名完了，接下来是代码</p>
<h2 id="三、微信小程序代码"><a href="#三、微信小程序代码" class="headerlink" title="三、微信小程序代码"></a><a href></a>三、微信小程序代码</h2><p> 这里的代码我是从<a href="https://www.bilibili.com/video/av22787596/?p=6" target="_blank" rel="noopener">哔哩哔哩</a>上学的，但是因为它的接口是用的天气网的接口是http协议的，现在微信小程序只支持https的，所以我将他的代码改了一下（刚学小程序，可能有很多问题，多多见谅）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br></pre></td><td class="code"><pre><span class="line">// js代码</span><br><span class="line">Page(&#123;</span><br><span class="line"></span><br><span class="line">  /**</span><br><span class="line">   * 页面的初始数据</span><br><span class="line">   */</span><br><span class="line">  data: &#123;</span><br><span class="line">    city:&quot;&quot;,</span><br><span class="line">    today:&#123;&#125;,</span><br><span class="line">    future:&#123;&#125;,</span><br><span class="line">    pollution:&quot;&quot;,</span><br><span class="line"></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  /**</span><br><span class="line">   * 生命周期函数--监听页面加载</span><br><span class="line">   */</span><br><span class="line">  onLoad: function (options) &#123;</span><br><span class="line">    this.loadInfo();</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  /**</span><br><span class="line">   * 生命周期函数--监听页面初次渲染完成</span><br><span class="line">   */</span><br><span class="line">  onReady: function () &#123;</span><br><span class="line">    </span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  /**</span><br><span class="line">   * 生命周期函数--监听页面显示</span><br><span class="line">   */</span><br><span class="line">  onShow: function () &#123;</span><br><span class="line">    </span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  /**</span><br><span class="line">   * 生命周期函数--监听页面隐藏</span><br><span class="line">   */</span><br><span class="line">  onHide: function () &#123;</span><br><span class="line">    </span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  /**</span><br><span class="line">   * 生命周期函数--监听页面卸载</span><br><span class="line">   */</span><br><span class="line">  onUnload: function () &#123;</span><br><span class="line">    </span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  /**</span><br><span class="line">   * 页面相关事件处理函数--监听用户下拉动作</span><br><span class="line">   */</span><br><span class="line">  onPullDownRefresh: function () &#123;</span><br><span class="line">    </span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  /**</span><br><span class="line">   * 页面上拉触底事件的处理函数</span><br><span class="line">   */</span><br><span class="line">  onReachBottom: function () &#123;</span><br><span class="line">    </span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  /**</span><br><span class="line">   * 用户点击右上角分享</span><br><span class="line">   */</span><br><span class="line">  onShareAppMessage: function () &#123;</span><br><span class="line">    </span><br><span class="line">  &#125;,</span><br><span class="line">  loadInfo:function()&#123;</span><br><span class="line">    var page=this;</span><br><span class="line">    wx.getLocation(&#123;</span><br><span class="line">      type: &apos;gcj02&apos;,</span><br><span class="line">      success:function(res) &#123;</span><br><span class="line">        var latitude = res.latitude</span><br><span class="line">        var longitude = res.longitude</span><br><span class="line">        console.log(latitude, longitude);</span><br><span class="line">        page.loadCity(latitude, longitude)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br><span class="line">  loadCity: function (latitude, longitude)&#123;</span><br><span class="line">    var page = this;</span><br><span class="line">  wx.request(&#123;</span><br><span class="line">    url: &apos;https://api.map.baidu.com/geocoder/v2/?ak=输入你自己的AK&amp;location=&apos; + latitude + &apos;,&apos; + longitude +&apos;&amp;output=json&apos;,</span><br><span class="line">    header:&#123;</span><br><span class="line">      &apos;Content-Type&apos;:&apos;application/json&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    success:function(res)&#123;</span><br><span class="line">     </span><br><span class="line">      var city = res.data.result.addressComponent.city;</span><br><span class="line">      city=city.replace(&quot;市&quot;,&quot;&quot;)</span><br><span class="line">      page.setData(&#123;city:city&#125;);</span><br><span class="line">      page.loadWeather(city);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">  &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">  loadWeather: function (city) &#123;</span><br><span class="line">    var page = this;</span><br><span class="line">    wx.request(&#123;</span><br><span class="line">      url: &apos;https://api.map.baidu.com/telematics/v3/weather/?ak=输入你自己的AK&amp;location=&apos; + city + &apos;&amp;output=json&apos;,</span><br><span class="line">      header: &#123;</span><br><span class="line">        &apos;Content-Type&apos;: &apos;application/json&apos;</span><br><span class="line">      &#125;,</span><br><span class="line">      success: function (res) &#123;</span><br><span class="line">        console.info(res);</span><br><span class="line">        var a = new RegExp(&quot;[0-1][0-9]月[0-3][0-9]日&quot;,&quot;g&quot;);</span><br><span class="line">        var future=res.data.results[0].weather_data;</span><br><span class="line">        var today = res.data.results[0];</span><br><span class="line"></span><br><span class="line">        var pollution;</span><br><span class="line">        future[0].date = future[0].date.replace(&quot;周一 &quot;, &quot;&quot;);</span><br><span class="line">        future[0].date = future[0].date.replace(&quot;周二 &quot;, &quot;&quot;);</span><br><span class="line">        future[0].date = future[0].date.replace(&quot;周三 &quot;, &quot;&quot;);</span><br><span class="line">        future[0].date = future[0].date.replace(&quot;周四 &quot;, &quot;&quot;);</span><br><span class="line">        future[0].date = future[0].date.replace(&quot;周五 &quot;, &quot;&quot;);</span><br><span class="line">        future[0].date = future[0].date.replace(&quot;周六 &quot;, &quot;&quot;);</span><br><span class="line">        future[0].date = future[0].date.replace(&quot;周日 &quot;, &quot;&quot;);</span><br><span class="line"></span><br><span class="line">        future[0].date = future[0].date.replace(a,&quot;&quot;);</span><br><span class="line">        future[0].date = future[0].date.replace(&quot; (实时：&quot;, &quot;&quot;);</span><br><span class="line">       </span><br><span class="line">        future[0].date = future[0].date.replace(&quot;℃)&quot;, &quot;&quot;);</span><br><span class="line"></span><br><span class="line">        if (today.pm25&lt;=35)&#123;</span><br><span class="line">          pollution=&quot; 空气质量优&quot;;</span><br><span class="line">        &#125;</span><br><span class="line">       else if (today.pm25 &gt; 35 &amp;&amp; today.pm25&lt;=75) &#123;</span><br><span class="line">          pollution = &quot; 空气质量良&quot;;</span><br><span class="line">        &#125;</span><br><span class="line">       else if (today.pm25 &gt; 75 &amp;&amp; today.pm25&lt;=115) &#123;</span><br><span class="line">          pollution = &quot; 轻度污染&quot;;</span><br><span class="line">        &#125;</span><br><span class="line">       else if (today.pm25 &gt; 115 &amp;&amp; today.pm25&lt;=150) &#123;</span><br><span class="line">          pollution = &quot; 中度污染&quot;;</span><br><span class="line">        &#125;</span><br><span class="line">       else if (today.pm25 &gt; 150 &amp;&amp; today.pm25&lt;=250) &#123;</span><br><span class="line">          pollution = &quot; 重度污染&quot;;</span><br><span class="line">        &#125;</span><br><span class="line">       else if (today.pm25 &gt; 250) &#123;</span><br><span class="line">          pollution = &quot; 严重污染&quot;;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        </span><br><span class="line">        page.setData(&#123;today:today,future:future,pollution:pollution&#125;);</span><br><span class="line">       </span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p> <img src="https://i.loli.net/2019/07/08/5d2307f5f1d4b31725.png" alt><br> 有两处需要修改AK的地方</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">//wxml</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;view class=&quot;content&quot; mode=&quot;widthFix&quot; &gt;</span><br><span class="line">   &lt;view  class=&apos;today&apos;&gt;</span><br><span class="line">      &lt;view  class=&apos;info&apos;&gt;</span><br><span class="line">        &lt;view class=&apos;temp&apos;&gt;&#123;&#123;future[0].date&#125;&#125;°C&lt;/view&gt;</span><br><span class="line">        &lt;view class=&apos;weather&apos;&gt;PM25：&#123;&#123;today.pm25&#125;&#125;&#123;&#123;pollution&#125;&#125;&lt;/view&gt;</span><br><span class="line"></span><br><span class="line">        &lt;view&gt;友情提示：&#123;&#123;today.index[0].des&#125;&#125;&lt;/view&gt;</span><br><span class="line">        &lt;view class=&apos;city&apos;&gt;&#123;&#123;city&#125;&#125;&lt;/view&gt;</span><br><span class="line">      &lt;/view&gt;</span><br><span class="line">    &lt;/view&gt;</span><br><span class="line">     </span><br><span class="line">     &lt;view class=&apos;future&apos;&gt;</span><br><span class="line">         &lt;view class=&apos;future-item&apos;&gt;</span><br><span class="line">              &lt;view&gt;今天&lt;/view&gt;</span><br><span class="line">               &lt;view&gt; &#123;&#123;future[0].temperature&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[0].weather&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[0].wind&#125;&#125; &lt;/view&gt;</span><br><span class="line">             </span><br><span class="line">           </span><br><span class="line">         &lt;/view&gt;</span><br><span class="line">          &lt;view class=&apos;future-item&apos;&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[1].date&#125;&#125;&lt;/view&gt;</span><br><span class="line">               &lt;view&gt; &#123;&#123;future[1].temperature&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[1].weather&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[1].wind&#125;&#125; &lt;/view&gt;</span><br><span class="line">         </span><br><span class="line">         &lt;/view&gt;</span><br><span class="line">         &lt;view class=&apos;future-item&apos;&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[2].date&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt; &#123;&#123;future[2].temperature&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[2].weather&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[2].wind&#125;&#125; &lt;/view&gt;</span><br><span class="line">           </span><br><span class="line">         &lt;/view&gt;</span><br><span class="line">         &lt;view class=&apos;future-item&apos;&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[3].date&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt; &#123;&#123;future[3].temperature&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[3].weather&#125;&#125;&lt;/view&gt;</span><br><span class="line">              &lt;view&gt;&#123;&#123;future[3].wind&#125;&#125; &lt;/view&gt; </span><br><span class="line">        </span><br><span class="line">         &lt;/view&gt;</span><br><span class="line">    &lt;/view&gt;</span><br><span class="line">      &lt;/view&gt;</span><br></pre></td></tr></table></figure>


<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// json</span><br><span class="line">&#123;</span><br><span class="line">    &quot;navigationBarTitleText&quot;: &quot;天气预报&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">// wxss</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">.content&#123;</span><br><span class="line">  font-family: 微软雅黑,宋体;</span><br><span class="line">  font-size: 14px;</span><br><span class="line">  background-size: cover;</span><br><span class="line">  height:100vh;</span><br><span class="line">  width: 100vw;</span><br><span class="line">  background-image: url(&quot;https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1553696593722&amp;di=d447006d38b37385438443163d9860e8&amp;imgtype=0&amp;src=http%3A%2F%2Fp1.gexing.com%2FG1%2FM00%2F75%2FC3%2FrBACE1MvA5ngraHSAAESYDiqWJ8441.jpg&quot;);</span><br><span class="line">  color: #ffffff;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">.info&#123;</span><br><span class="line">  padding: 5px;</span><br><span class="line">  background: #ffffff;</span><br><span class="line">  background: rgba(0, 0, 0, 0.5);</span><br><span class="line">  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);</span><br><span class="line">&#125;</span><br><span class="line">.today&#123;</span><br><span class="line">  padding-top: 50rpx;</span><br><span class="line">  height: 50%;</span><br><span class="line">&#125;</span><br><span class="line">.city&#123;</span><br><span class="line">  color: white;</span><br><span class="line">  font-size: 16px;</span><br><span class="line">  text-align: right;</span><br><span class="line">  margin-right: 10rpx;</span><br><span class="line">  margin-top: 30rpx;</span><br><span class="line">&#125;</span><br><span class="line">.temp&#123;</span><br><span class="line">  font-size: 50px;</span><br><span class="line">  text-align: center;</span><br><span class="line">&#125;</span><br><span class="line">.weather&#123;</span><br><span class="line">  text-align: center;</span><br><span class="line">  &#125;</span><br><span class="line">  .future&#123;</span><br><span class="line">    display: flex;</span><br><span class="line">    flex-direction:row;</span><br><span class="line">    height: 40%;</span><br><span class="line">    padding-left: 5rpx;</span><br><span class="line">    background: #ffffff;</span><br><span class="line">     background: rgba(247, 238, 238, 0.1); </span><br><span class="line">    box-shadow: 10px 10px 20px rgba(252, 249, 249, 0.5);</span><br><span class="line">    text-align: center;</span><br><span class="line">    padding-top: 10rpx;</span><br><span class="line">    padding-bottom: 20rpx; </span><br><span class="line">  &#125;</span><br><span class="line">  .future-item&#123;</span><br><span class="line">    min-height: 100%;</span><br><span class="line">    width: 165rpx;</span><br><span class="line">    margin-left: 10rpx;</span><br><span class="line">    margin-right: 10rpx;</span><br><span class="line">    border: 1px solid rgb(170, 156, 150);</span><br><span class="line">    border-radius: 10px;</span><br><span class="line">    padding-top: 10rpx;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">  .future-item view&#123;</span><br><span class="line">    margin-top: 10px;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p> 最后完成应该是：<br> <img src="https://i.loli.net/2019/07/08/5d23082f8d74a74717.png" alt><br> 可以在Console栏中查看API的一些信息：<br> <img src="https://i.loli.net/2019/07/08/5d2308424fd3d10626.png" alt><br> <img src="https://i.loli.net/2019/07/08/5d2308534de0064091.png" alt></p>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="http://link.hhtjim.com/163/1374051000.mp3">
            </audio>
            
        </div>
        
        
    <div id='gitalk-container' class="comment link"
        data-ae='false'
        data-ci='e79d3ae9c45da13e6f66'
        data-cs='896cb16e937a9e56f91295c1bab9e5aad59746ad'
        data-r='MrDCG.github.io'
        data-o='MrDCG'
        data-a='MrDCG'
        data-d='true'
    >查看评论</div>


        
    </div>

    
    
</div>

    </div>
</div>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/koharu.model.json"},"display":{"position":"right","width":145,"height":315},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
<script src="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/diaspora.js"></script>
<link rel="stylesheet" href="/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css">
<script src="/photoswipe/photoswipe.min.js"></script>
<script src="/photoswipe/photoswipe-ui-default.min.js"></script>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>




</html>
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/crash_cheat.js"></script>
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/clicklove.js"></script>